<template>
  <section class="menu">
    <router-link class="menu-item" :class="{ active: $route.name === RouterEnum.HOME }" :to="{ name: RouterEnum.HOME }"
      >推送</router-link
    >
    <router-link
      class="menu-item"
      :class="{ active: $route.name === RouterEnum.SCHEDULE }"
      :to="{ name: RouterEnum.SCHEDULE }"
      >日程</router-link
    >
    <router-link
      v-if="userInfo?.curriculumVitae"
      class="menu-item"
      :class="{ active: $route.name === RouterEnum.PORTRAIT }"
      :to="{ name: RouterEnum.PORTRAIT }"
      >简历</router-link
    >
  </section>
</template>

<script setup lang="ts">
import { RouterEnum } from '@/enum/routerEnum';
import userStore from '@/plugins/pinia/stores/user';

const { userInfo } = userStore();
</script>
<style scoped lang="scss">
.menu {
  display: flex;
  align-items: center;
  box-shadow:
    inset 0 -1px 0 #000,
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 0 40px 5px rgba(0, 0, 0, 0.25);
  border: 0.2rem solid #353535;
  border-radius: 2rem;
  .menu-item {
    color: #fff;
    font-weight: 600;
    padding: 1rem 4rem;
    text-wrap: nowrap;
    &:nth-child(n) {
      border-radius: 2.5rem 1rem 2.5rem 1rem;
    }
    &:nth-child(1) {
      border-radius: 2.5rem 0.8rem 4rem 2.5rem;
    }
    &:last-child {
      border-radius: 4rem 2.5rem 2.5rem 0.8rem;
    }
  }
  .active {
    color: #000;
    transform: skewX(-25deg) scale(1.2);
    animation: bg-pulse 5s infinite;
    transition: all 0.3s;
  }
  @keyframes bg-pulse {
    0% {
      background: #d7d000;
    }
    25% {
      background: #a5d700;
    }
    50% {
      background: #75b801;
    }
    75% {
      background: #a5d700;
    }
    100% {
      background: #d7d000;
    }
  }
}
</style>
